<template>
<div class="cart-tbody">
            <div class="shangpin" v-for="(item,index) in gouwuche" :key="index">
                    <div class="t-checkbox"><input type="checkbox" class="check-shangpin"></div>
                    <div class="t-shangpin"><img :src="item.img" alt="">{{item.name}}</div><!--商品名-->
                    <div class="t-price">¥{{item.money}}</div><!--价格-->
                    <div class="t-quantity"><input type="button" value=" - " @click="jian(item.num,index)">
                                            <input type="text"  v-model="item.num">
                                            <input type="button" value=" + " @click="add(item.num,index)">
                    </div><!--数量-->
                    <div class="t-sum">{{item.sum_item}}</div><!--小计-->
                    <div class="t-action"><span>删除</span></div><!--操作-->
            </div>
            <div class="AllMoney">共{{sum}}¥<input type="button" value="立即付款"></div>
        </div>
</template>

<script>
export default {
    data(){
       return {
            
       }    
    },
props:["gouwuche","shop"],
computed: {
    sum() {
      let result = 0;
      this.gouwuche.forEach(element => {
        result += element.sum_item;
      });
        return result;
    }
  },
methods:{
    add(num, index) {
      // 获取当前的num值有两种方式：①传参数 把视图上的item.num 传进来，②this.gouwu[index].num   index也可以作为参数传进来
      this.gouwuche[index].num = num + 1;
      console.log(this.gouwuche)
      this.gouwuche[index].sum_item = this.gouwuche[index].money * 1 * this.gouwuche[index]
      .num * 1;
    },
    jian(num, index) {
      this.gouwuche[index].num = num - 1;
      if(this.gouwuche[index].num<0){
          alert("不可为负");
          this.gouwuche[index].num = num + 1
      }
      this.gouwuche[index].sum_item = this.gouwuche[index].money * 1 * this.gouwuche[index]
      .num * 1;
    },
    
}
}
</script>

<style>
.shangpin{
            box-sizing: border-box;
            padding: 5px;
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .shangpin div{
            float: left;
            line-height: 80px;
        }
        .shangpin .t-checkbox{
            width: 15px;
        }
        .shangpin .t-shangpin{
            line-height: normal;
            box-sizing: border-box;
            width: 500px;
            margin-right: 30px;
            padding: 15px;
        }
        .shangpin .t-props{
            width: 150px;
        }
        .shangpin .t-price{
            
            width: 84px;
            padding-left: 10px;
            margin-right: 80px;
        }
        .shangpin .t-quantity{
            margin-top:30px;
            height: 20px;
            width: 84px;
            padding-left: 10px;
            margin-right: 110px;
        }
        .shangpin .t-quantity input[type=text]{
            text-align: center;
            float: left;
            box-sizing: border-box;
            height: 100%;
            width: 50px;
            border: 1px solid gainsboro;
        }
        .shangpin .t-quantity input[type=button]{
            float: left;
            height: 100%;
            width: 15px;
            border: 1px solid gainsboro;
        }
        .shangpin .t-sum{
            
            width: 84px;
            padding-left: 10px;
            margin-right: 85px;
        }
        .shangpin .t-action{
            margin-right: 10px;
            padding-left: 5px;
        }
        .shangpin img{
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 20px;
        }
        .AllMoney{
            position: relative;
            line-height: 30px;
            text-align: center;
            width: 250px;
            margin: 0 auto;
            font-size: 30px;
            font-weight: bold;
        }
        .AllMoney input{
            position: absolute;
            background-color: red;
            font-size: 20px;
            font-weight: bolder;
            color: white;
            height: 32px;
            border: none;
            border-radius: 5px;
            width: 100px;
        }
</style>